var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');
var remote = require('electron').remote;

var redux = require('react-redux')
var connect = redux.connect;

var ConversationList = createReactClass({
    getInitialState: function() {
        return {focus:undefined};
    },
    
    onClick: function(conv, e) {
        e.preventDefault();
        e.stopPropagation();
        this.props.onConversationClick(conv);
        return false;
    },

    onError: function(e) {
        //加载头像失败
        console.log("onerror:", e, e.target);
        var placeholder = e.target.getAttribute('data-placeholder');
        if (placeholder && placeholder != e.target.src) {
            e.target.src = placeholder;
            console.log("set placeholder");
        }
    },

    showContextMenu: function(conv, e, props) {
        e.preventDefault();
        e.stopPropagation();
        console.log("context menu event:", e);
        console.log("context menu props:", props);
        console.log("show context menu:" + conv.cid);

        var menu = new remote.Menu.buildFromTemplate([
            {
                id: 'delete',
                label: '删除',
                click: () => {
                    this.deleteConversation(conv.cid);
                }
            },
        ]);
        menu.popup(remote.getCurrentWindow());
        menu.on('menu-will-close', ()=> {
            this.setState({focus:undefined});
            console.log("menu will close");
        });
        this.setState({focus:conv});        
    },

    deleteConversation: function(cid) {
        console.log("delete conversation:", cid);
        if (this.props.conversation.cid == cid) {
            this.props.dispatch({type:"set_conversation", conversation:{}});
        }
        this.props.dispatch({type:"remove_conversation", cid:cid});
        this.props.conversationDB.removeConversation(cid);
    },

    render: function() {
        var nodes = []
        var convs = this.props.conversations;
        
        for (var i in convs) {
            var conv = convs[i];
                var name = "";
                var avatar = "";
                if (conv.type == "peer") {
                    avatar = "images/_avatar.png";
                } 
                if (conv.type == "group") {
                    var lvl="";
                    if(conv.avatar){
                        avatar=conv.avatar
                    }else{
                    avatar = "images/avatar_group.png";
                    }
                    lvl=conv.lvl
                    if(lvl){
                        var imglvl="images/lv"+lvl+".png"
                    }else{
                        var imglvl=""
                    }
                }
          
            var placeholder = avatar;

            if (conv.name) {
                name = conv.name;
            }

            if (conv.avatar) {
                avatar = conv.avatar;
            }

            var time = ""
            if (conv.message) {
                time = helper.toTime(conv.message.timestamp*1000);
            }

            var active = false;
            if (conv.cid == this.props.conversation.cid) {
                active = true;
            }
            var focus = false;
            if (this.state.focus && this.state.focus.cid == conv.cid) {
                focus = true;
            }
            //console.log("cid:", conv.cid, " unread:", conv.unread, " active:", active);
            var msg = "";
            if (conv.message) {
                if (conv.message.contentObj.text) {
                    msg = conv.message.contentObj.text;
                } else if (conv.message.contentObj.audio) {
                    msg = "[语音]";
                } else if (conv.message.contentObj.image2 ||
                           conv.message.contentObj.image) {
                    msg = "[图片]";
                } else if (conv.message.contentObj.file) {
                    msg = "[文件]";
                } else if (conv.message.contentObj.location) {
                    msg = "[位置]";
                } else if (conv.message.contentObj.notification) {
                    msg = conv.message.contentObj.notification;
                } else if (conv.message.contentObj.video) {
                    msg = "[视频]";
                } else {
                    msg = "[未知消息类型]";
                }
            }

            var cls = "border"
            if (active) {
                cls += " selected";
            }
            if (focus) {
                cls += " focus";
            }
            
            console.log("cls name");
            var t = (
                <div draggable="false" href={"/conversations/"+conv.cid}
                    className={active ? "conversation-item selected" : "conversation-item"}
                    onContextMenu={this.showContextMenu.bind(this, conv)}
                    onClick={this.onClick.bind(this, conv)}
                    data-uid={conv.cid}
                     key={conv.cid}>
                    <div className={cls}>
                        <div className="ext">
                            <p className="attr clearfix timer">
                                <span className="pull-left">{time}</span>
                            </p>
                            <p className="attr clearfix">
                                <span className="badge">{conv.unread||''}</span>
                            </p>
                        </div>

                        <div className="photo">
                            <img src={avatar} data-placeholder={placeholder} onError={this.onError} className="avatar" alt=""/>
                        </div>

                        <div className="info">
                            <h3 className="nickname">
                                <span className="nickname_text">
                                    {name}
                                </span>
                            </h3>
                            <p className="msg">
                                <span>
                                    {msg}
                                </span>
                                <img src={imglvl} style={{float:"right"}} />
                                {/* <span className="lvl" style={{float:"right"}}>
                                    {lvl}
                                </span> */}
                            </p>
                        </div>
                    </div>
                    
                </div>
            )
            nodes.push(t);
    }
        return (
            <div className="conversation-list">
                {nodes}
            </div>
        )
    }
});

var ConversationList = connect(function(state) {
    return state;
})(ConversationList);
module.exports = ConversationList;
